<<<<<<< HEAD
=======
<template>
  <el-card>
    <!-- 筛选表单区域 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-form label-width="200px;" :inline="true">
          <el-form-item>
            <el-input
              v-model="queryData.username"
              size="small"
              placeholder="管理员账号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.number="queryData.email"
              size="small"
              placeholder="管理员邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.status"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              @click="initData"
              type="primary"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button size="small" @click="resetSearch" icon="el-icon-refreseh"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 操作区域 -->

      <el-col style="width: 100px"
        ><el-button
          @click="showDialog = true"
          icon="el-icon-plus"
          type="primary"
          plain
          size="small"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <br />
    <!-- // 4 渲染【列表功能】  -->
    <!-- el-table data表示表格数据 -->
    <el-table :data="list" border>
      <!-- el-table-colum 表示一列，label表示表头名称，prop表示展示的数据字段, type表示列类型，index表示序号列 -->
      <el-table-column
        label="管理员id"
        prop="id"
        width="90px;"
      ></el-table-column>
      <el-table-column label="管理员姓名" prop="username"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column
        label="管理员头像"
        prop="avatar"
        type="flex"
        align="center"
      >
        <template slot-scope="{ row }">
          <img
            :src="`http://124.223.14.236:7005/${row.avatar}`"
            alt=""
            class="imgXran"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        prop="role_name_str"
        type="flex"
        align="center"
        style="display: block"
        width="120px"
      >
        <template slot-scope="scope">
          <el-tag
            type="success"
            disable-transitions
            v-for="(item, index) in scope.row.roles_names"
            :key="index"
            style="margin: 0 10px 5px 10px"
          >
            <span>{{ item }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at"></el-table-column>
      <el-table-column label="状态" prop="status" type="flex" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :inactive-value="2"
            :active-value="1"
            @change="change(row.id, row.status)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px;" type="flex" align="center">
        <template slot-scope="{ row }">
          <el-button
            @click="editHandler(row)"
            circle
            size="small"
            type="primary"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="delHandler(row.id)"
            circle
            size="small"
            type="danger"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.page"
      :page-sizes="[10, 8, 6]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
    <!-- 新增/修改弹框区域 -->
    <!--  // 2 绘制弹框 【新增功能】 -->
    <el-dialog
      v-if="showDialog"
      :title="formData.id ? '修改' : '新增'"
      :visible.sync="showDialog"
      @close="closeHanlder"
      width="800px"
    >
      <!--  // 3 绘制表单 【新增功能】 -->

      <el-form :model="formData" :rules="formRules" ref="form">
        <el-row type="flex" :gutter="24">
          <el-col :span="12">
            <el-form-item prop="username" label="管理员名称">
              <el-input
                v-model="formData.username"
                placeholder="请输入姓名"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="email" label="管理员邮箱">
              <el-input
                v-model="formData.email"
                placeholder="请输入邮箱"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="24">
          <el-col :span="12">
            <el-form-item prop="password" label="管理员密码">
              <el-input
                v-model="formData.password"
                :placeholder="formData.id ? '留空则不修改' : '请输入密码'"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phone" label="管理员手机">
              <el-input
                v-model="formData.phone"
                placeholder="请输入手机号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="24">
          <el-col :span="12">
            <el-form-item prop="status" label="管理员状态">
              <el-switch
                v-model="formData.status"
                inactive-text="禁用"
                active-text="启用"
                :inactive-value="2"
                :active-value="1"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phone" label="管理员头像">
              <!-- // 插件  -->
              <div class="box">
                <el-image
                  v-if="imgSrc"
                  :src="`http://124.223.14.236:7005/${imgSrc}`"
                  lazy
                  class="imgEl"
                ></el-image>
                <el-button
                  @click="isshow = true"
                  size="small"
                  type="primary"
                  :style="{
                    float: imgSrc ? 'right' : 'left',
                    'margin-top': imgSrc ? '30px' : '0',
                  }"
                  >点击上传</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="roleid_list" label="管理员角色">
          <el-checkbox-group v-model="formData.roleid_list">
            <el-checkbox
              v-for="item in checkListAll"
              :key="item.id"
              :label="item.id"
              :value="item.id"
              >{{ item.role_name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <!--  // 4 事件提交逻辑 【新增功能】 -->
        <el-button @click="showDialog = false" size="small">取消</el-button>
        <el-button @click="btnOk" type="primary" size="small">确定</el-button>
      </el-row>
    </el-dialog>
  </el-card>
</template>
<script>
import {
  getUserInfoApi,
  PostUserInfoApi,
  UseUserInfoApi,
  OneUserInfoApi,
  PutUserInfoApi,
  delUserInfoApi,
} from "@/api/permission/user/user";
import { getRoleListAPI } from "@/api/permission/role";
export default {
  name: "menuUser",
  data() {
    return {
      isshow: false,
      imgSrc: "",
      options: [
        {
          label: "全部",
        },
        {
          value: 0,
          label: "冻结",
        },
        {
          value: 1,
          label: "启用",
        },
      ],
      value: false,
      // num: 1,
      // 1. 定义变量 【列表功能】
      list: [], // 表格数据
      queryData: {
        // 列表接口需要的数据
        username: "",
        status: "",
        email: "",
        page: 1,
        limit: 10,
      },
      formRules: {
        username: [
          { required: true, message: "管理员名称必须！", trigger: "blur" },
        ],
        email: [
          {
            required: true,
            message: "管理员邮箱必须！",
            trigger: "blur",
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址！",
            trigger: "blur",
          },
        ],
        phone: [
          {
            type: "string",
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: "手机号码格式不正确！",
            trigger: "blur",
          },
          { required: true, message: "手机号必须填写！", trigger: "blur" },
        ],
        roleid_list: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
          {
            type: "array",
            min: 1,
            max: 3,
            required: true,
            message: "角色不能超过3个",
            trigger: "change",
          },
        ],
        password: [
          {
            type: "string",
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,16}$/,
            message: "密码必须包含字母和数字",
            trigger: "blur",
          },
          {
            required: true,
            message: "密码必须填写！",
            trigger: "blur",
          },
        ],
      },
      count: 0, // 总数
      // 1. 定义变量 【新增功能】
      formData: {
        email: "",
        phone: "",
        username: "",
        password: "",
        avatar: "",
        roleid_list: [],
        status: "",
      },
      showDialog: false,
      checkList: [],
      checkListAll: [],
    };
  },
  created() {
    this.initData();
    this.AllList();
  },
  methods: {
    async AllList() {
      let res = await getRoleListAPI();
      console.log(res);
      this.checkListAll = res.list;
      console.log(this.checkListAll);
    },
    async initData() {
      let { list, total } = await getUserInfoApi(this.queryData);
      this.list = list;
      this.count = total;
    },
    // 页码变化事件
    handleCurrentChange(val) {
      // val最新页码
      this.queryData.page = val;
      this.initData();
    },
    // 每页数量变化事件
    handleSizeChange(val) {
      // val 最新每页数量
      this.queryData.limit = val;
      this.initData();
    },
    // 搜索重置
    resetSearch() {
      this.queryData.username = "";
      this.queryData.status = "";
      this.queryData.email = "";
      this.initData();
    },
    //  4 事件提交逻辑 【新增功能】
    async btnOk() {
      try {
        if (this.formData.id) {
          this.formRules.password = [];
        }
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await PutUserInfoApi(this.formData);
      } else {
        await PostUserInfoApi(this.formData);
      }
      this.$message.success("操作成功");
      this.showDialog = false;
      this.initData();
    },
    closeHanlder() {
      this.formData = {
        email: "",
        phone: "",
        username: "",
        password: "",
        avatar: "",
        roleid_list: [],
        status: "",
      };
      this.imgSrc = "";
    },
    // 修改事件
    async editHandler(val) {
      let res = await OneUserInfoApi({ id: val.id });
      console.log(res);
      this.formData = res;
      this.imgSrc = res.avatar;
      this.showDialog = true;
    },
    // 删除逻辑
    async delHandler(id) {
      let that = this;
      try {
        await this.$confirm("确认删除吗");
      } catch (e) {
        console.log(e);
      }
      await delUserInfoApi({ id: id });
      this.$message.success("删除成功");
      this.initData();
    },
    upload(res) {
      console.log(res);
      this.formData.avatar = res.url;
      this.isshow = false;
      this.imgSrc = res.url;
    },
    async change(val, status) {
      console.log(val, status);
      let { msg } = await UseUserInfoApi({
        id: val,
        hidden: status,
      });
      this.$message.success(msg);
      this.initData();
    },
  },
};
</script>
<style lang="scss" scoped>
.imgEl {
  // margin: 0 20px 20px 20px;
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.imgXran {
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
.box {
  float: left;
  width: 180px;

  height: 80px;
}
</style>
>>>>>>> f813540e5411455e7f6aef78f278a4ef7a04d3d2
